<html>
    <head>
        <title>Demo jPaginate</title>
        <link href="css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery-ui.min.js" type="text/javascript"></script>
        <script src="jquery.paginate.js" type="text/javascript"></script>
        <style type="text/css">
            .active-pag { font-weight:bold; font-size:12pt; }
            .pag-item { width:35px; }
            .pages { list-style-type:none; margin-left: -40px; } 
            .pages li { float:left; margin: 0 0.15em; width:20px; height:20px; text-align:center; line-height:20px; font-size: 7pt; cursor:pointer;}
        </style>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {

                $('#content-pages').paginate({ Total: 10, PerPage: 2, showNavigation: true,
                    selected: function (item) {
                        $('#content').children('div').toggle(false);
                        $(item.page).toggle(true);
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="demo.html">
            <div id="content-pages"></div>
            <div id="content">
                <div id="page-1"><ul><li>Item 1</li><li>Item 2</li></ul></div>
                <div id="page-2"><ul><li>Item 3</li><li>Item 4</li></ul></div>
                <div id="page-3"><ul><li>Item 5</li><li>Item 6</li></ul></div>
                <div id="page-4"><ul><li>Item 7</li><li>Item 8</li></ul></div>
                <div id="page-5"><ul><li>Item 9</li><li>Item 10</li></ul></div>
            </div>
        </form>
    </body>
</html>